import React, { Component } from "react";
import "./style.css";

export default class TabControl extends Component {
  tabItemClick(index) {
    this.props.tabIndexClick(index);
  }

  render() {
    const { children, names, tabIndex, itemType } = this.props;
    console.log(children);

    return (
      <div className="tab-control">
        {names.map((item, index) => {
          return (
            <div
              key={item}
              className={index === tabIndex ? "item active" : "item"}
              onClick={(e) => this.tabItemClick(index)}
            >
              {itemType(item)}
            </div>
          );
        })}
      </div>
    );
  }
}
